<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=dege" />
    <meta name="format-detection" content="telephone=no" />
    <title>知了知了</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <link rel="stylesheet" href="css/layui.css" />
    <link rel="stylesheet" href="css/laydate.css" />
    <link href="images/favicon.ico" rel="icon" type="images/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1631099_c2ht6ck3pi.css">
    <link rel="stylesheet" href="css/headfoot.css" />
    <link rel="stylesheet" href="css/h.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script src="js/index.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/layui.js"></script>
    <script src="js/laydate.js"></script>
    <script src="js/wow.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
    <script>
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
            new WOW().init();
        }

    </script>
</head>

<body>
    <!--头部部分-->
    <div class="heads baibg">
        <script>
            $(".heads").load("head.html");
        </script>
    </div>
    <div class="lanbg">
        <div class="pad50">
            <div class="main-md">
                <div class="individualism">
                    <div class="individualism_lf">
                        <script>
                            $(".individualism_lf").load("lefts.html");
                        </script>
                    </div>
                    <div class="individualism_rt baibg bor30">
                        <div class="individualism_tit">
                            <h1>我的订单</h1>
                        </div>
                        <div class="individualism__second_tit jiangshi_tit leaflets_pc">
                            <a href="#" class="active">公开课</a> <span> （完全免费）</span>
                            <a href="#">推荐课</a> <span> （部分免费）</span>
                            <a href="#">商城课</a> <span> （全部收费）</span>
                            <a href="#">学习资料</a> <span> （完全免费）</span>
                        </div>
                        <div class="publish">
                            <div class="publish_form leaflets_pc">
                                <form action="">
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 课程名称：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <input type="text">
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 课程简介：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <textarea name="" id=""></textarea>
                                            <p>（简介字数不超过30字）</p>
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span>配图： </span>
                                        </div>
                                        <div class="publish_rt">
                                            <div class="tu">
                                                <div class="tu_list">
                                                    <div class="tu_img">
                                                        <img src="images/dyf/tuque.png" alt="">
                                                    </div>
                                                    <div class="tu_btn">
                                                        <span> 封面图 </span> <br>
                                                        <button>点击上传</button>
                                                        <input type="file" placeholder="点击上传">
                                                    </div>
                                                </div>
                                                <div class="tu_list">
                                                    <div class="tu_img">
                                                        <img src="images/dyf/tuque.png" alt="">
                                                    </div>
                                                    <div class="tu_btn">
                                                        <span> 详情预览图 </span> <br>
                                                        <button>点击上传</button>
                                                        <input type="file" placeholder="点击上传">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 发布时间：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <input type="text" id="test1">
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 招生人数：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <input type="text">
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 课程概要：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <div class="kuang"></div>
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 常见问题：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <div class="kuang"></div>
                                        </div>
                                    </div>
                                    <div class="publish_item">
                                        <div class="publish_lf">
                                            <span> 上传课程：</span>
                                        </div>
                                        <div class="publish_rt">
                                            <div class="zhang">
                                                <h1> 章节</h1>
                                                <div class="zhang_op1">
                                                    <span>章节标题:</span>
                                                    <input type="text">
                                                </div>
                                                <div>
                                                    <div class="zhang_op2">
                                                        <span>小节标题:</span>
                                                        <input type="text">
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        <div class="dis3">添加小节</div>
                                                        <div class="dis4">删除</div>
                                                    </div>
                                                </div>

                                                <div class="zhang_op3">

                                                </div>
                                                <div class="add_zhang">添加章节 </div>
                                                <div class="add">

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="publish_btn">
                                        <button> 发布课程 </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="leaflets_phone hide_pc">
                            <p class="org"> 请用电脑端打开！！ </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--页尾-->
    <div class="foots">
        <script>
            $(".foots").load("foot.html");
        </script>
    </div>
    <script>
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });
        var html = `<div class="zhang_op2">
                                                        <span>小节标题:</span>
                                                        <input type="text">
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        <div class="dis3">添加小节</div>
                                                        <div class="dis4">删除</div>
                                                    </div>`;
        var html2 = `<div class="zhang">
                                                <h1> 章节</h1>
                                                <div class="zhang_op1">
                                                    <span>章节标题:</span>
                                                    <input type="text">
                                                </div>
                                                <div>
                                                    <div class="zhang_op2">
                                                        <span>小节标题:</span>
                                                        <input type="text">
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        <div class="dis3">添加小节</div>
                                                        <div class="dis4">删除</div>
                                                    </div>
                                                </div>

                                                <div class="zhang_op3">

                                                </div>
                                                <div class="add_zhang">添加章节 </div>
                                                <div class="add">

                                                </div>
                                            </div>
`;
        $(".zhang").on('click', '.dis3', function () {
            $(this).parent().parent().append(html)
        })
        $(".zhang").on('click', '.dis4', function () {
            $(this).parent().remove();
        })
        $(".zhang").on('click', '.add_zhang', function () {
            $(".add").append(html2)
        })

    </script>
</body>

</html>